<template>
  <li :class="itemClasses">
    <div :class="tailClasses"></div>
    <div v-if="$slots.dot" :class="headClassesSlot" :style="customColor" ref="dot">
      <slot name="dot"></slot>
    </div>
    <div v-else :class="headClasses" :style="customColor" ref="dot"> </div>
    <div :class="contentClasses">
      <slot></slot>
      <div :class="timeClasses">{{ timestamp }}</div>
    </div>
    <div :class="expandClasses">
      <e-button type="text" icon="caret-down1" v-if="open" @click="open = false">折叠</e-button>
      <e-button type="text" icon="caret-up1" v-else @click="open = true">展开</e-button>
      <div :class="expandContentClasses">
        <slot name="content" v-if="open"></slot>
      </div>
    </div>
    <div :class="bottomClasses"></div>
  </li>
</template>
<script>
const prefixCls = 'haloe-timeline';
import eButton from "../button";

export default {
  name: 'TimelineItem',
  props: {
    color: {
      type: String,
      default: 'blue'
    },
    timestamp: {
      type: String
    },
    expand: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dot: false,
      open: false
    };
  },
  computed: {
    itemClasses() {
      return `${prefixCls}-item`;
    },
    tailClasses() {
      return [
        `${prefixCls}-item-tail`,
        {
          [`${prefixCls}-item-tail-no-scroll`]: !this.$parent.isShowHorizontalScroller,
        }
      ];
    },
    expandClasses() {
      return [
        `${prefixCls}-item-expand`,
        { [`${prefixCls}-item-expand-opacity`]: !this.expand }
      ];
    },
    expandContentClasses() {
      return  `${prefixCls}-item-expand-content`;
    },
    bottomClasses() {
      return `${prefixCls}-item-bottom`;
    },
    headClasses() {
      return [
        `${prefixCls}-item-head`,
        { 
          [`${prefixCls}-item-head-${this.color}`]: this.headColorShow,
          [`${prefixCls}-item-head-no-scroll`]: !this.$parent.isShowHorizontalScroller,
        }
      ];
    },
    headClassesSlot() {
      return [
        {
          [`${prefixCls}-item-head-custom`]: this.dot,
          [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
        }
      ];
    },
    headColorShow() {
      return this.color === 'blue' || this.color === 'red' || this.color === 'green';
    },
    customColor() {
      let style = {};
      if (this.color) {
        if (!this.headColorShow) {
          style = {
            'color': this.color,
            'border-color': this.color
          };
        }
      }
      return style;
    },
    contentClasses() {
      return [
        `${prefixCls}-item-content`,
        {
          [`${prefixCls}-item-content-no-scroll`]: !this.$parent.isShowHorizontalScroller,
        }
      ];
    },
    timeClasses() {
      return `${prefixCls}-item-time`;
    }
  },
  mounted() {
    this.dot = !!this.$refs.dot.innerHTML.length;
  },
};
</script>
